/* components */
import { RoleViewHeader, RoleViewTabsForView } from '@src/modules/account/role/component'
import { Message } from 'element-ui'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* hooks */
import { useRoleViewRoleDeleteRole, useRoleViewRoleResetRole, useRoleViewTree } from "@src/modules/account/role/hooks"
import { useStoreCurrentSelectRole, useStoreFetchAuthGroups, useStoreFetchRoleTree, useStoreInitData, useStoreMode, useStoreRoles } from "@src/modules/account/role/store/hooks"
import useLoading from '@src/modules/account/role/hooks/useLoading'
/* model */
import { REMOVE_ROLE_AUTH_SUCCESS_MESSAGE, RESET_SUCCESS_MESSAGE } from '@src/model/const/Alert'
import MsgModel from '@model/MsgModel'
import Role from '@model/entity/Role/Role'
/* scss */
import '@src/modules/account/role/component/RoleViewContentView/index.scss'
/* vue */
import { ComponentInstance, ComputedRef, defineComponent, ref } from 'vue'
/* util */
import { message } from '@src/util/message'
import { loadingPromise } from '@src/modules/account/role/util'

export type RoleViewContentViewProps = {

}

export interface RoleViewContentViewSetupState {
  currentSelectRole: ComputedRef<Role>;
}

export enum RoleViewContentViewEventEnum {
  Input = 'input'
}

export type RoleViewContentViewEmitsOptions = {
  input: () => void;
}

export type RoleViewContentViewInstance = ComponentInstance & RoleViewContentViewSetupState
export type RoleViewContentViewVM = RoleViewContentViewSetupState & RoleViewContentViewProps & ComponentInstance

export default defineComponent({
  name: ComponentNameEnum.RoleViewContentView,
  emits: [
    RoleViewContentViewEventEnum.Input
  ],
  setup(props: RoleViewContentViewProps, { slots, emit }) {
    
    const { currentSelectRole, setCurrentSelectRole } = useStoreCurrentSelectRole()
    const { systemRoles } = useStoreRoles()
    const { setEditMode } = useStoreMode()
    const fetchAuthGroups = useStoreFetchAuthGroups()
    const fetchRoleTree = useStoreFetchRoleTree()
    const roleDelete = useRoleViewRoleDeleteRole()
    const roleReset = useRoleViewRoleResetRole()
    const { loading } = useLoading()
    
    async function onClickDeleteRoleHandler() {
      
      await loadingPromise(loading.value)
      
      roleDelete().then(result => {
        
        const isSuccess = MsgModel.isSuccess(result)
        
        if (isSuccess) {
          
          message.success(REMOVE_ROLE_AUTH_SUCCESS_MESSAGE)
          
          fetchRoleTree().then(() => {
            setCurrentSelectRole(systemRoles.value[0])
          })
          
        } else {
          message.error(result.message)
        }
        
      })
    }
    
    function onClickEditRoleHandler() {
      setEditMode()
    }
    
    async function onClickResetRoleHandler() {
      
      await loadingPromise(loading.value)
      
      roleReset().then(result => {
        
        const isSuccess = MsgModel.isSuccess(result)
        
        if (isSuccess) {
          
          message.success(RESET_SUCCESS_MESSAGE)
          
          fetchAuthGroups()
          
          fetchRoleTree()
          
        } else {
          message.error(result.message)
        }
        
      })
    }
    
    return {
      currentSelectRole,
      onClickDeleteRoleHandler,
      onClickEditRoleHandler,
      onClickResetRoleHandler
    }
    
  },
  render() {
    return (
      <div class={ComponentNameEnum.RoleViewContentView}>
        
        <RoleViewHeader 
          role={this.currentSelectRole} 
          onDelete={this.onClickDeleteRoleHandler}
          onEdit={this.onClickEditRoleHandler}
          onReset={this.onClickResetRoleHandler}
        />
        
        <RoleViewTabsForView />
        
      </div>
    ) as any
  }
}) as any
